﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');
</style> 
<title>MEGA 2.0</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/business-register.css" />
<link rel="stylesheet" type="text/css" href="../css/retina-images.css" />
<script type="text/javascript" src="../js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="../js/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="../js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
  function initTreePanelScroll()
  {
	  $('.fm-tree-panel').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  function initTransferPanelScroll()
  {
	  $('.transfer-scrolling-table').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  function initSharedGridScroll()
  {
	  $('.grid-scrolling-table').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  function initSharedBlocksScroll()
  {
	  $('.shared-blocks-scrolling').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  
  
  $.gridHeader = function()  
  {	
		$('.grid-table tbody tr:first-child td').each(function(i,e) {
		  var headerColumn = $('.grid-table-header th').get(i);
		  $(headerColumn).width($(e).width());
	    });
   }	
	
  initTreePanelScroll();
  initTransferPanelScroll();
  initSharedGridScroll();
  initSharedBlocksScroll();
  $.gridHeader();
  
  $(window).bind('resize', function () 
  {
	  initTreePanelScroll();
      initTransferPanelScroll();
      initSharedGridScroll();
	  initSharedBlocksScroll();
      $.gridHeader();
  });
  $('.nw-fm-tree-folder').bind('click', function() {
	  var fmTreeItem = $(this).parent('.nw-fm-tree-item');
	  if(fmTreeItem.attr('class').indexOf('selected') == -1) {
		  $('.nw-fm-tree-item.selected').removeClass('selected');
		  fmTreeItem.addClass('selected');
	  }
  });
  $('.contains-folders > .nw-fm-arrow-icon').bind('click', function() {
	  var fmTreeItem = $(this).parent('.nw-fm-tree-item');
	  if(fmTreeItem.attr('class').indexOf('expanded') == -1) {
		  fmTreeItem.addClass('expanded');
		  fmTreeItem.next('ul').addClass('opened');
		  initTreePanelScroll();
	  } else {
		  fmTreeItem.removeClass('expanded');
		  fmTreeItem.next('ul').removeClass('opened');
		  initTreePanelScroll();
	  }
  });
  $('.nw-fm-left-icon').bind('click', function() {
	  var currentPanelTitle = $(this).attr('class').split(' ')[1];
	  if($(this).attr('class').indexOf('active') == -1) {
		  $('.nw-fm-left-icon.active').removeClass('active');
		  $(this).addClass('active');
		  $('.content-panel.active').removeClass('active');
		  $('.content-panel.'+currentPanelTitle).addClass('active');
		  initTreePanelScroll();
		  $('.fm-left-menu').removeClass().addClass('fm-left-menu ' + currentPanelTitle);
	  }
  });
  $('.nw-contact-item').bind('click', function() {
	  if($(this).attr('class').indexOf('selected') == -1) {
		  $('.nw-contact-item.selected').removeClass('selected');
		  $(this).addClass('selected');
	  }
  });
  $('.nw-conversations-item').bind('click', function() {
	  if($(this).attr('class').indexOf('selected') == -1) {
		  $('.nw-conversations-item.selected').removeClass('selected');
		  $(this).addClass('selected');
	  }
  });
  var initial;
  $('.nw-fm-left-icon').bind('mouseover', function () {
	  var  tooltip = $(this).find('.nw-fm-left-tooltip');
	  clearTimeout( initial );
	  initial = window.setTimeout( 
      function() {
        $(tooltip).addClass('hovered');
      }, 1000);
  });
  $('.nw-fm-left-icon').bind('mouseout', function () {
	    $(this).find('.nw-fm-left-tooltip').removeClass('hovered');
		clearTimeout( initial );
  });
  
  $('.fm-files-view-icon').bind('click', function () {
	  if ($(this).attr('class').indexOf('active') == -1) {
		  if ($(this).attr('class').indexOf('block-view') > -1) {
			  $('.files-grid-view ').addClass('hidden');
			  $('.fm-blocks-view').removeClass('hidden'); 
              initSharedBlocksScroll();
		  } else {
			  $('.files-grid-view ').removeClass('hidden');
			  $('.fm-blocks-view').addClass('hidden');
			  initSharedGridScroll();
		  }
		  $('.fm-files-view-icon').removeClass('active');
		  $(this).addClass('active');
	  }
  }); 
});
</script>
</head>

<body id="bodyel" class="logged rk-saved fontsize2 en free font-user-management">

<div id="fmholder" class="fmholder">
		
	<!-- Dialog -->

<div class="user-management-add-user-dialog user-management-dialog fm-dialog hidden"> 
    <div class="dialog-title">Invite People to Team</div>
    <div class="dialog-subtitle hidden">Users accounts will be activated after the link in the verification emails have been confirmed and the user sets their own password.</div>
    <div class="delete-img icon"></div>
        <div class="dialog-input-container">
            <div class="input-user">
                <div class="indi-input">
                    <input type="text" class="dialog-input active" placeholder="Name" autofocus>
                    <div class="error-message">Server error, please try again.</div> 
                </div>
                <div class="indi-input">
                    <input type="text" class="dialog-input placeholder" placeholder="Email">
                </div>
            </div>                
        </div>
        <div class="verification-container hidden">
                <div class="avatar">
                    <div class="subuser-image">
                        <img src="" class="hidden">
                    </div>
                </div>
				<div class="verification-user-info">
				    <div class="verification-user-email"><b>Email:</b><div class="sub-e">kz@mgea.cp.nz</div></div>
				    <div class="verification-user-pw"><b>Invitation Link Password:</b><div class="sub-p">QhisTZ99k505yyMb801ivg</div></div>
				</div>
                <div class="checked-icon56 icon56"></div>                                   
        </div><!--END folder container-->
    <div class="dialog-button-container">
        <div class="default-white-button-user-management">
           <div class="add-more-img icon"></div>
           Add More
        </div>               
        <div class="default-white-button-user-management hidden">
          <div class="import-contact-img icon"></div>
          Import Contacts
        </div>  
        <div class="default-green-button-user-management">Ok</div> 
    </div>
    <div class="licence-bar hidden">
        <div class="notification-img icon"></div>
        5 sub account licences used.
        <div class="default-white-button-user-management">
        View Plans
        </div>
    </div>
</div><!--END add user dialog-->  

<div class="user-management-edit-profile-dialog user-management-dialog fm-dialog hidden">
    <div class="user-management-subuser-avatars">
    	<div class="user-management-subuser-image"></div>
    </div>
	<div class="dialog-title">Edit Profile</div>
	<div class="delete-img icon"></div>
	<div class="dialog-input-container">
		<div class="dialog-input-title-ontop">
			Name<br>
			<input class="dialog-input correct-input" type="text" value="Iwata Takanori" autofocus>
		</div>
		<div class="dialog-input-title-ontop">
			Email<br>
			<input class="dialog-input correct-input" type="text" value="Jay_Pierce@janie.net">
		</div>
		<div class="dialog-input-title-ontop">
			Role<br>
			<div class="dialog-input correct-input">
	        	<div class="list-arrow"></div>
		        <select size="1">
		            <option value=" ">Sub-administrator</option>
		            <option value=" ">Product manager</option>
		            <option value=" ">Developer</option>
		            <option value=" ">Designer</option>
		        </select>
			</div>
		</div>
		<div class="border"></div>
		<div class="dialog-input-title-ontop">
			Position<br>
			<input class="dialog-input placeholder" type="text" value="Position">
		</div>
		<div class="dialog-input-title-ontop">
			ID number<br>
			<input class="dialog-input placeholder" type="text" value="000">
		</div>
		<div class="dialog-input-title-ontop">
			Phone number<br>
			<input class="dialog-input placeholder" type="text" value="(123) 000 000">
		</div>
		<div class="dialog-input-title-ontop">
			Location<br>
			<input class="dialog-input placeholder" type="text" value="New Zealand">
		</div>
	</div>
	<div class="dialog-button-container">
		<div class="default-green-button-user-management">
			Save Changes
		</div>
		<div class="default-white-button-user-management">
			Cancel
		</div>
	</div>
</div>

<div class="user-management-able-user-dialog user-management-dialog fm-dialog hidden">
	<div class="re-enable-large-icon icon56"></div>
	<div class="dialog-text-container">
		<div class="dialog-text-one">Are you sure you want to re-enable the account of <b>Jay Pierce</b>?</div>
	</div>
	<div class="dialog-button-container">
		<div class="default-green-button-user-management">
			Yes
		</div>
		<div class="default-white-button-user-management">
			Cancel
		</div>
	</div>				
</div>

<div class="user-management-able-user-dialog user-management-dialog fm-dialog hidden">
	<div class="disable-large-icon icon56"></div>
	<div class="dialog-text-container">
        <div class="dialog-text-one">Are you sure you want to disable the account of <b>Jay Pierce</b>? </div>
        <span class="dialog-text-two">Note: You can re-enable the account at any later stage from the disabled accounts list.</span>
	</div>
	<div class="dialog-button-container">
		<div class="default-gray-button-user-management">
			Yes
		</div>
		<div class="default-white-button-user-management">
			Cancel
		</div>
	</div>				
</div>

	<!-- the blur class is main-blur-block-->

<div class="fm-main-user-management">
	<div class="overlay hidden"></div>

	<!-- left icon pane -->
 	<div class="nw-fm-left-icons-panel">
 	 	<div class="nw-fm-left-icon dashboard ui-droppable">
            <div class="nw-fm-left-border"></div>
            <div class="dark-tooltip">Dashboard</div>
        </div>

		<div class="nw-fm-left-icon cloud-drive ui-droppable">
            <div class="nw-fm-left-border"></div>
            <div class="dark-tooltip">Cloud Drive</div>
        </div>
        
		<div class="nw-fm-left-icon inbox ui-droppable hidden">
            <div class="nw-fm-left-border"></div>
            <div class="dark-tooltip">Inbox</div>
        </div>


		<div class="nw-fm-left-icon shared-with-me ui-droppable">
            <div class="nw-fm-left-border"></div>
            <div class="dark-tooltip">Shared with me</div>
        </div>

		<div class="nw-fm-left-icon contacts ui-droppable">
            <div class="nw-fm-left-border"></div>
            <div class="dark-tooltip">Contacts</div>
        </div>

		<div class="nw-fm-left-icon conversations ui-droppable">
            <div class="nw-fm-left-border"></div>
            <div class="new-messages-indicator hidden">2</div>
            <div class="dark-tooltip">Conversations</div>
            <div class="beta-text"></div>
        </div>

            <div class="nw-fm-left-icon user-management active">
                <div class="nw-fm-left-border"></div>
                <div class="dark-tooltip">User Management</div>
                <div class="beta-text"></div>
            </div> 

		<div class="nw-fm-left-icon rubbish-bin ui-droppable">
            <div class="nw-fm-left-border"></div>
            <div class="dark-tooltip">Rubbish Bin</div>
        </div>

		<div class="nw-fm-left-icon account ui-droppable">
            <div class="nw-fm-left-border"></div>
            <div class="dark-tooltip">Settings</div>
        </div>

		<div class="nw-fm-left-icon transfers ui-droppable">
            <div class="nw-fm-left-border file-transfer-icon"></div>
            <div class="dark-tooltip">File Transfers</div>
            <div class="nw-fm-percentage download">
                <ul>
                  <li class="nw-fm-chart0 right-c"><p><span></span></p></li>
                  <li class="nw-fm-chart0 left-c"><p><span></span></p></li>
                </ul>
                <div class="transfer-bar-overlay"></div>
            </div>

            <div class="nw-fm-percentage upload">
                <ul>
                  <li class="nw-fm-chart0 right-c"><p><span></span></p></li>
                  <li class="nw-fm-chart0 left-c"><p><span></span></p></li>
                </ul>
                <div class="transfer-bar-overlay"><div></div></div>
            </div>
        </div>
 	</div>

 	<!-- Left list pane -->
	<div class="fm-left-panel ui-resizable user-management">
		<div class="left-pane-drag-handle ui-resizable-handle ui-resizable-e"></div>
	   
		<div class="user-management-sorting-menu hidden"> 
	        <div class="sorting-menu-arrow"></div>
	        <p> SORT </p>

	        <div class="sorting-menu-item-user-management">
	        	<div class="user-management-sort-name sort-icon"></div>
	        	<span>Name</span>
	        	<div class="up-arrow-icon"></div>
	        </div>
	        <div class="sorting-menu-item-user-management">
	        	<div class="user-management-sort-status sort-icon"></div>
	        	<span>Status</span>
	        </div>
		</div>
	    
		<div class="fm-left-menu user-management">
	        <div class="nw-fm-tree-header user-management">
	            <input value="" placeholder="User Management" type="text">
	            <div class="nw-fm-search-icon"></div>
	        </div>
		</div>

		<div class="user-management-tree-panel-header enabled-accounts active">
			<div class="img enabled-accounts"></div>
	        <span>Enabled Accounts</span>
	        <div class="user-management-tree-panel-arrows"></div>
		</div>

	 	<div class="user-management-tree-panel-header disabled-accounts">
	 		<div class="img disabled-accounts"></div>
	    	<span>Disabled Accounts</span>
	    	<div class="user-management-tree-panel-arrows hidden"></div>
		</div>

		<div class="fm-tree-panel">
	    	<div class="jspContainer">
	        	<div class="jspPane"> 
	            	<div class="content-panel user-management active">
	              </div>
	            </div>
	        </div>
		</div>

 		<div class="fm-right-files-block">
 		</div>
	</div>

 	<!-- Right field -->
 	<div class="top-head">
	</div>

	<div class="fm-right-files-block">
		<div class="user-management-landing-page user-management-view hidden">
			<div class="landing-page-container">
				<div class="mega-56px-icon"></div>
				<div class="landing-title">Welcome to MEGA User Management</div>
				<div class="landing-sub-title">User management helps you to organise all users of your organization in one place.  You are able to add/edit/disable users, modify user settings and get overview of your business account status here.</div>
			    <div class="landing-sub-container">
					<div class="add-user-icon56 icon56"></div>
					<div class="landing-container-title">Add Users</div>
					<div class="landing-container-subtitle">Get started with inviting people to your team</div>
					<div class="default-white-button-user-management">Add Users</div>
			    </div>
				<div class="landing-sub-container">
				    <div class="accounts-icon56 icon56"></div>
				    <div class="landing-container-title">Accounts</div>
				    <div class="landing-container-subtitle">Modify user settings</div>
				    <div class="default-white-button-user-management">Manage Users</div>
				</div>
			    <div class="licence-bar">
			        <div class="notification-white-img icon"></div>
			        <span>5 sub account licences used.</span>
			        <div class="default-white-button-user-management">
			        View Plan
			        </div>
			    </div>
			</div>
		</div>

		<div class="user-management-overview-bar hidden">
			<div class="user-management-overview-bar-data">
				<div class="info-block">
					<div class="number-of-user-icon icon"></div>
					<span class="title">Number Of Uers: vfffff</span>
					<span class="number">11</span>
				</div>

				<div class="info-block">
					<div class="total-storage-usage-icon icon"></div>
					<span class="title">Total Storage Usage: vvvv</span>
					<span class="number">12.4</span>
					<span class="title2"> GB</span>
				</div>
				<div class="info-block">
					<div class="total-transfer-usage-icon icon"></div>
					<span class="title">Total Transfer Usage:</span>
					<span class="number">1.4</span>
					<span class="title2"> GB</span>
				</div>
				<div class="default-white-button-user-management">
					<div class="view-plan-icon icon"></div>View Plans
				</div>
			</div>
		</div>

		<div class="fm-right-header-user-management">
			<div class="user-management-main-page-buttons hidden">
				<a class="fm-files-view-icon-user-management block-view" title="Thumbnail view"></a>
				<a class="fm-files-view-icon-user-management listing-view active" title="List view"></a>
				<div class="default-white-button-user-management">
					<div class="overview-icon icon"></div>
					Overview
				</div>
				<div class="default-white-button-user-management">
					<div class="account-icon icon"></div>
					Account
				</div>
				<div class="default-green-button-user-management">
					<div class="add-users-icon icon"></div>
					Add Users
				</div>
	        </div>
			<div class="user-management-breadcrumb subaccount hidden">
			    <div class="user-management-icon"></div>
			    <div class="user-management-next-arrow"></div>
			    <div class="user-management-subuser-avatars">
			  	   <div class="user-management-subuser-image"></div>
			    </div>
			    <div class="user-management-subuser-name">Jay Pierce</div>
			</div>
			<div class="user-management-breadcrumb overview hidden">
			    <div class="user-management-icon"></div>
			    <div class="user-management-next-arrow"></div>
				<div class="user-management-breadcrumbs-img overview-icon"></div>
				<div class="user-management-subuser-name">Overview</div>
			</div>
			<div class="user-management-breadcrumb account">
			    <div class="user-management-icon"></div>
			    <div class="user-management-next-arrow"></div>
				<div class="user-management-breadcrumbs-img account-icon"></div>
				<div class="user-management-subuser-name">Account</div>
				<div class="user-management-next-arrow"></div>
				<div class="user-management-subuser-name">Inv No. (placeholder!!!!)</div>
			</div>
		    <div class="user-management-overview-buttons hidden">
				<div class="default-white-button-user-management">
					<div class="export-pdf-icon icon"></div>
					Export to PDF
				</div>
				<div class="default-white-button-user-management">
					<div class="view-plan-icon icon"></div>
					View Plans
				</div>
		    </div>
		</div>

		<div class="files-grid-view user-management-view">
			<div class="user-management-list-table hidden">
	            <table class="header-table-user-management">
	                <tbody>
	                 <tr class="grid-table-header-user-management">
	                    <th>  
	                        <div class="checkdiv left checkboxOff-user-management small-user-management">
	                        </div>
	                    </th>
	                    <th> <div class="arrow name desc">Name</div> </th>
	                    <th><div class="arrow desc">Status</div></th>
	                    <th><div class="arrow asc">Storage usage</div></th>
	                    <th><div class="arrow desc">Transfer usage</div></th>
	                    <th>
	                       <!-- this one is just for taking up place, please hide it always-->
	                        <div class="icon hidden">
	                        </div>
	                        <div class="resend-email-icon icon">
	                            <div class="tooltip">Re-send Verification Email</div>
	                        </div>  
	                        <div class="disabled-icon icon">
	                            <div class="tooltip">Disable User</div>
	                        </div>
	                    </th>
	                </tr>
		            </tbody>
		        </table>
				<div class="grid-scrolling-table">
		    		<table class="grid-table-user-management">
		                <tr>
		                    <td>  
		                        <div class="checkdiv left checkboxOff-user-management small-user-management">
		                        </div>
		                    </td>
		                    <td>                                    
		                        <div class="fm-user-management-user">
		                            <div class="admin-icon hidden">
		                                <div class="tooltip">Sub – administrators</div>
		                            </div>                                          
		                           <div class="user-management-name">Jtttttttte</div>
		                        </div>
		                        <div class="user-management-email">alvah_powlowski@yahoo.com</div> 
		                    </td>
		                    <td>
		                        <div class="user-management-status enabled"></div>
		                        <span>Active</span>
		                    </td>
		                    <td><span>0.8 GB</span></td>
		                    <td><span>13.2 GB</span></td>
		                    <td>
		                        <div class="view-icon icon">
		                            <div class="tooltip">View Account</div>
		                        </div> 				                    	
		                        <div class="edit-icon icon">
		                            <div class="tooltip">Edit Profile</div>
		                        </div>
		                        <div class="disabled-icon icon">
		                            <div class="tooltip">Disable Account</div>
		                        </div>				                          
		                    </td>
		                </tr>			                    		               
		    		</table>
				</div>
	        </div>

	        <div class="user-management-subaccount-view-container hidden">
	        	<div class="user-management-subuser-profile-container">
	            	<div class="subaccount-img-big"></div>
	            	<div class="user-management-subuser-profile">
	            		<div class="subuser-name">Jay Pierce</div>
	            		<div class="subuser-email">hermiston_alessandra@janie.net</div>

	           			<div class="view-status-row">
	            			<div class="user-management-view-status pending"></div>
	            			<span class="user-management-view-status text">Pending</span>
	            			<div class="initial-pw-bar">
	                    		<span><b>Initial password: </b> &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226;</span>
	                    		<div class="icon-button">
	                    			<div class="show-pw-white-icon icon"></div>
	                    		</div>			                 		
	                		</div>
	            		</div>

	                	<div class="admin-icon role hidden">
	                		<div class="admin-text">Sub-adminstrator</div>
	                	</div>
	                    <div class="profile-button-container">
	            		<div class="default-white-button-user-management">Re-send Verification Email</div>
	            		<div class="default-white-button-user-management">Edit Profile</div>
	            		<div class="default-gray-button-user-management">Disable Account</div>
	                	</div>
	            	</div>
	        	</div>

	        	<div class="user-management-view-data">
	            	<div class="user-management-view-overall-usage">
	            		<div class="view-title">Overall Usage</div>
	            		<div class="user-management-storage">
	            			<div class="storage-img img"></div>
	            			<div class="view-info">
	                			<div class="storage-transfer-text">STORAGE</div>
	            				<div class="storage-transfer-data">30.3 GB</div>
	            			</div>
	            		</div>

	            		<div class="user-management-transfer">
	            			<div class="transfer-img img"></div>
	            			<div class="view-info">
	                			<div class="storage-transfer-text">TRANSFER</div>
	            				<div class="storage-transfer-data">16.7 GB</div>
	            			</div>
	            		</div>
	            	</div>

	                <div class="subaccount-view-used-data">
	                    <div class="view-title">Data</div>
	                    <div class="used-storage-info">
	                        <i class="folder-small-icon cloud"></i>
	                        <div class="ff-name">Cloud Drive</div>
	                        <div class="ff-number">
	                            <div class="folder-number">32 folders</div>
	                            <div class="file-number">322 files</div>
	                        </div>
	                        <div class="ff-occupy">758.6 MB</div>
	                        <div class="clear"></div>
	                    </div>
	                     <div class="used-storage-info">
	                        <i class="folder-small-icon income"></i>
	                        <div class="ff-name">Incoming Shares</div>
	                        <div class="ff-number">
	                            <div class="folder-number">32 folders</div>
	                            <div class="file-number">322 files</div>
	                        </div>
	                        <div class="ff-occupy">758.6 MB</div>
	                        <div class="clear"></div>
	                    </div>
	                      <div class="used-storage-info">
	                        <i class="folder-small-icon rubbish"></i>
	                        <div class="ff-name">Rubbish Bin</div>
	                        <div class="ff-number">
	                            <div class="folder-number">32 folders</div>
	                            <div class="file-number">322 files</div>
	                        </div>
	                        <div class="ff-occupy">758.6 MB</div>
	                        <div class="clear"></div>
	                    </div>
	                      <div class="used-storage-info">
	                        <i class="folder-small-icon tiny-clock"></i>
	                        <div class="ff-name">Perious Versions</div>
	                        <div class="ff-number">
	                            <div class="folder-number">32 folders</div>
	                            <div class="file-number">322 files</div>
	                        </div>
	                        <div class="ff-occupy">758.6 MB</div>
	                        <div class="clear"></div>
	                    </div>                                                                    
	                </div>                	
	        	</div>
	        </div>

	        <div class="user-management-overview-container hidden">
	            <div class="user-analysis-container">
	        		<div class="view-title">User Analytics</div>
	        		<div class="user-segments-container">
	        			<div class="user-segment-title">Users in Total:</div>
	        			<div class="user-segment-number">24</div>
	        			<div class="user-segment-trend">
	        				<b>&#8679; (4%) </b> over the last 30 days over the last 30 days 
	        			</div>
	        		</div>
					<div class="user-segments-container">
	        			<div class="user-segment-title">Active Users:</div>
	        			<div class="user-segment-number">18</div>
	        			<div class="user-segment-trend">
	    					<b class="bond-color">&#8679; 2  </b> over the last 30 days
	    				</div>
					</div>
					<div class="user-segments-container">
						<div class="user-segment-title">Pending Users:</div>
	        			<div class="user-segment-number">3</div>
					</div>
					<div class="user-segments-container">
						<div class="user-segment-title">Disabled Users:</div>
	        			<div class="user-segment-number">3</div>
					</div>
	        	</div>

	        	<div class="data-analysis-container">
	        		<div class="storage-analysis-container">
	        			<div class="view-title">Storage Analytics</div>
	        			<div class="storage-big-chart">
	        				<div class="pie" data-start="0" data-value="10"></div>
							<div class="pie highlight" data-start="10" data-value="30"></div>
							<div class="pie" data-start="40" data-value="30"></div>
							<div class="pie big" data-start="70" data-value="290"></div>
	        				<div class="storage-small-circle">
	        					<span class="total-storage-title">Total Storage</span>
	        					<span class="total-storage-number">102.7 GB</span>
	        				</div>
	        			</div>

	        			<div class="storage-division-container">
	        				<div class="storage-division-per cloud-drive-color">72%</div>
	        				<div class="storage-division-name">Cloud Drive</div>
	        				<div class="storage-division-num">356 GB</div>
	        			</div>

	        			<div class="storage-division-container">
	        				<div class="storage-division-per inbox-color">0.2%</div>
	        				<div class="storage-division-name">Inbox</div>
	        				<div class="storage-division-num">356 GB</div>
	        			</div>

	        			<div class="storage-division-container">
	        				<div class="storage-division-per incoming-color">11%</div>
	        				<div class="storage-division-name">Incoming Shares</div>
	        				<div class="storage-division-num">356 GB</div>
	        			</div>

	        			<div class="storage-division-container">
	        				<div class="storage-division-per rubbish-color">11%</div>
	        				<div class="storage-division-name">Rubbish bin</div>
	        				<div class="storage-division-num">356 GB</div>
	        			</div>
	        		</div>

	        		<div class="transfer-analysis-container">
	        			<div class="view-title">Transfer Analytics</div>
	        			<div class="transfer-analysis-summary">
	            			<div class="total-transfer-title">Total Transfer:</div>
	            			<div class="total-transfer-number">310.3 GB</div>
	            			<div class="total-transfer-trend">
	            				<b class="bond-color">&#8679; 2.3 GB </b>
	            				(+1.2%) over the last 30 days over the last 30 days
	            			</div>
	        			</div>
	        			<div class="daily-transfer-container">
	        				<div class="daily-transfer-title">Daily Transfer:</div>
	        				<div class="default-white-drop-box">
	        					<div class="list-arrow"></div>
	            				<select>
								  <option value="dec2017">December 2017</option>
								  <option value="nov2017">November 2017</option>
								  <option value="oct2017">October 2017</option>
								  <option value="sep2017">September 2017</option>
								</select>
	        				</div>



	        				<div class="daily-transfer-flow-container">
	        					<div class="daily-transfer-flow">
	        						<span>500</span>
	        						<span>0</span>
	        					</div>
	        					<div class="daily-transfer-measure">
	        						<div class="daily-transfer-flow-background"></div>
	        						<div class="daily-transfer-flow-background"></div>
	        						<div class="daily-transfer-flow-background"></div>
	        						<div class="daily-transfer-flow-background"></div>
	        						<div class="daily-transfer-flow-background"></div>
	        					</div>
	        					<div class="daily-transfer-data">
	        						<div class="daily-transfer-flow-bar bar1">
	        							<div class="tooltip">
	        							<span>1.12.2017</span>
	        							<div class="border"></div>
	        							<span>184.5 GB</span>
	        							</div>
	        						</div>


	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar1"></div>
	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar1"></div>
	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar1"></div>
	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar1"></div>
	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar1"></div>
	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar1"></div>
	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar1"></div>
	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar1"></div>
	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        						<div class="daily-transfer-flow-bar bar1"></div>
	        						<div class="daily-transfer-flow-bar bar2"></div>
	        						<div class="daily-transfer-flow-bar bar3"></div>
	        					</div>           		
	        					<div class="daily-transfer-date">
	        						<div class="date date1">01 Dec</div>
	        						<div class="date date2">15 Dec</div>
	        						<div class="date date3">30 Dec</div>
	        					</div>
	        				</div>

	        				<span>Use your mouse to see statistics from particular day</span>
	        				<span>Unit: GB</span>
	        			</div>
	        		</div>
	        	</div>
	        </div>

	        <div class="user-management-grid-table hidden">
				<a class="">
	        		<div class="subaccount-img-big">
	        			<div class="subaccount-selection-button select-off hidden"></div>
	        			<div class="subaccount-button hidden">
	        				<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	        			</div>
	        			<div class="subaccount-grid-menu enabled-user hidden">
	        				<div class="subaccount-grid-menu-option">
								<div class="edit-icon icon"></div>
								Edit Profile
	        				</div>
	        				<div class="subaccount-grid-menu-option">
								<div class="view-icon icon"></div>
								View Profile
	        				</div>
	        				<div class="subaccount-grid-menu-option">
								<div class="disabled-red-icon icon"></div>
								Disable User
	        				</div>
	        			</div>
	        		</div>
	        		<div class="subaccount-name">Eric Griffith</div>
	        		<div class="user-management-status enabled"></div>
	        		<div class="subaccount-email">cummerata_leif@verner.biz</div>
				</a>

	        	<a class="">
	        		<div class="subaccount-img-big">
	        			<div class="subaccount-selection-button select-off hidden"></div>
	        			<div class="subaccount-button hidden">
	        				<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	        			</div>
	        		</div>
	        		<div class="subaccount-name">Eric Griffith ric Griffith ric Griffith</div>
	        		<div class="user-management-status pending"></div>
	        		<div class="subaccount-email">cummerata_leif@verner.biz cummerata_leif@verner.biz</div>
				</a>

				<a class="">
	        		<div class="subaccount-img-big">
	        			<div class="subaccount-selection-button select-off"></div>
	        			<div class="subaccount-button">
	        				<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	        			</div>
	        			<div class="subaccount-grid-menu disabled-user">
	        				<div class="subaccount-grid-menu-option">
								<div class="view-icon icon"></div>
								View Profile
	        				</div>
	        				<div class="subaccount-grid-menu-option">
								<div class="migrate-icon icon"></div>
								Migrate Data
	        				</div>
	        				<div class="subaccount-grid-menu-option">
								<div class="enabled-green-icon icon"></div>
								Re-enable User
	        				</div>
	        			</div>
	        		</div>
	        		<div class="subaccount-name">Eric Griffith</div>
	        		<div class="user-management-status disabled"></div>
	        		<div class="subaccount-email">cummerata_leif@verner.biz</div>
				</a>

				<a class="">
	        		<div class="subaccount-img-big">
	        			<div class="subaccount-selection-button select-off hidden"></div>
	        			<div class="subaccount-button hidden">
	        				<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	        			</div>
	        		</div>
	        		<div class="subaccount-name">Eric Griffith</div>
	        		<div class="user-management-status disabled"></div>
	        		<div class="subaccount-email">cummerata_leif@verner.biz</div>
				</a>

				<a class="">
	        		<div class="subaccount-img-big">
	        			<div class="subaccount-selection-button select-on"></div>
	        			<div class="subaccount-button">
	        				<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	            			<div class="subaccount-button-dot"></div>
	        			</div>
	        			<div class="subaccount-grid-menu enabled-user">
	        				<div class="subaccount-grid-menu-option">
								<div class="resend-email-icon icon"></div>
								Re-send Verification Email Re -send V erification Email
	        				</div>
	        				<div class="subaccount-grid-menu-option">
								<div class="view-icon icon"></div>
								View Profile
	        				</div>
	        				<div class="subaccount-grid-menu-option">
								<div class="disabled-red-icon icon"></div>
								Disable User
	        				</div>
	        			</div>
	        		</div>
	        		<div class="subaccount-name">Eric Griffith</div>
	        		<div class="user-management-status pending"></div>
	        		<div class="subaccount-email">cummerata_leif@verner.biz</div>
				</a>
	        </div>

	        <div class="user-management-account-settings">
	        	<div class="auto-save">
	        		<div class="confirm-white-img icon"></div>
	        		Setting saved
	        	</div>


	        	<div class="settings-menu-bar">
	        		<div class="settings-menu-item selected">Profile</div>
	        		<div class="settings-menu-item">Invoice</div>
	        	</div>
	        	<div class="border"></div>

	        	<div class="settings-submenu-bar">
	        		<div class="settings-submenu-item selected">
	        			<div class="setting-icon24 company-name"></div>
	        			Company information</div>
	        		<div class="settings-submenu-item">
		        		<div class="setting-icon24 admin"></div>
		        		Admin information</div>
	        	</div>
	        	<div class="border"></div>

		        <div class="settings">
		        	<div class="setting-block">
		        		<div class="title">
		        			<div class="contact-icon48 icon48"></div>
		        			Contact              			
		        		</div>

		            	<div class="option-containers">
		            		<div class="heading">Contact can be added from:</div>
		    				<div class="default-white-button-user-management">
								<div class="close-icon icon"></div>
								Close
		    				</div>

		        			<div class="option-group">
								<form>
									<div class="checked"><input type="radio"> <span>Any source</span></div>
									<div><input type="radio"> <span>External users cannot be added</span></div>
									<div><input type="radio"> <span>Require administrator approval to add external contacts Require administrator approval to add external contacts</span></div>


									<div class="sub-option">
										<div class="checkboxOn-user-management small-user-management"></div>
									 	<div class="sub-heading">Automatically allow the contacts with emails or domains in the whitelist to be added or sent. Automatically allow the contacts with emails or domains in the whitelist to be added or sent. </div>	
									</div>
										<div class="default-white-button-user-management">
									 	<div class="fold-icon icon"></div>
										Hide the list
									</div>
								 	<div class="dialog">
								 		<div class="list-heading">
							 				<div class="list-title">Email</div>
			 								<div class="default-button-no-border">
												<div class="close-icon icon"></div>
												Close
											</div>
			 								<div class="default-button-no-border">
												<div class="add-more-img icon"></div>
												Add More
											</div>
								 		</div>
								 		<div class="list scroll-auto">
									 		<div class="list-row">
								 				<div class="list-email">berniece_gerhold@yahoo.com berniece_gerhold@yahoo.com berniece_gerhold@yahoo.com</div>
								 				<div class="delete-img icon"></div>
								 				<div class="quick-edit-icon icon"></div>
									 		</div>
									 		<div class="list-row">
								 				<div class="list-email">berniece_gerhold@yahoo.com</div>
								 				<div class="delete-img icon"></div>
								 				<div class="quick-edit-icon icon"></div>
									 		</div>
									 		<div class="list-row">
								 				<div class="list-email">berniece_gerhold@yahoo.com</div>
								 				<div class="delete-img icon"></div>
								 				<div class="quick-edit-icon icon"></div>
									 		</div>								 						
									 		<div class="list-row">
								 				<div class="list-email">berniece_gerhold@yahoo.com</div>
								 				<div class="delete-img icon"></div>
								 				<div class="quick-edit-icon icon"></div>
									 		</div>								 						
									 		<div class="list-row">
								 				<div class="list-email">berniece_gerhold@yahoo.com</div>
								 				<div class="delete-img icon"></div>
								 				<div class="quick-edit-icon icon"></div>
									 		</div>
									 		<div class="list-row">
								 				<div class="list-email">berniece_gerhold@yahoo.com</div>
								 				<div class="delete-img icon"></div>
								 				<div class="quick-edit-icon icon"></div>
									 		</div>
								 		</div>


								 		<div class="list-heading">
							 				<div class="list-title">Domains</div>
			 								<div class="default-button-no-border">
												<div class="close-icon icon"></div>
												Close
											</div>
			 								<div class="default-button-no-border">
												<div class="add-more-img icon"></div>
												Add More
											</div>
								 		</div>
								 		<div class="list scroll-auto">
									 		<div class="list-row">
								 				<div class="list-email">berniece_gerhold@yahoo.com</div>
								 				<div class="delete-img icon"></div>
								 				<div class="quick-edit-icon icon"></div>
									 		</div>
									 		<div class="list-row">
								 				<div class="list-email">berniece_gerhold@yahoo.com</div>
								 				<div class="delete-img icon"></div>
								 				<div class="quick-edit-icon icon"></div>
									 		</div>								 			
								 		</div>

								 	</div>
								</form>
		            		</div> 
						</div>

		            	<div class="option-containers black-list">
		            		<div class="heading">Black list</div>

		            		<div class="dialog-feature-toggle toggle-on">
		            			<div class="dialog-feature-switch"></div>
		            		</div>

		        			<div class="option-group">
								<form>
									<div class="sub-option">
									 	<div class="sub-heading">Note: After you block individual emails or domains, they will be automatically removed as contacts from all accounts. </div>	
									</div>
										<div class="default-white-button-user-management">
									 	<div class="fold-icon icon"></div>
										Hide the list
									</div>
								 	<div class="dialog">
								 		<div class="list-heading">
			 								<div class="default-button-no-border">
												<div class="add-more-img icon"></div>
												Add More
											</div>
								 		</div>
								 		<div class="list-row">
							 				<div class="list-email">berniece_gerhold@yahoo.com</div>
							 				<div class="delete-img icon"></div>
							 				<div class="quick-edit-icon icon"></div>
								 		</div>
								 		<div class="list-row">
							 				<div class="list-email">berniece_gerhold@yahoo.com</div>
							 				<div class="delete-img icon"></div>
							 				<div class="quick-edit-icon icon"></div>
								 		</div>
								 	</div>
								</form>
		            		</div> 
						</div>
		        	</div>

		        	<div class="setting-block hidden">
		        		<div class="title">
		        			<div class="share-icon48 icon48"></div>
		        			Share              			
		              	</div>

		            	<div class="option-containers file-share">
		            		<div class="heading">Files/folders can be shared to:</div>
		        				<div class="default-white-button-user-management">
									<div class="close-icon icon"></div>
									Close
		        				</div>	
		        			<div class="option-group">
								<form>
									<div class="checked"><input type="radio"> <span>Files/folders can be shared to internal and external users</span></div>
									<div><input type="radio"> <span>Files/folders can be shared to internal users only</span></div>
									<div><input type="radio"> <span>Files/folders require administrator approval to allow an external user access</span></div>
									<div class="sub-option">
									 	<div class="checkboxOn-user-management small-user-management"></div>
									 	<div class="sub-heading">Automatically allow the files/folders in the following list to be shared.</div>	
									</div>
										<div class="default-white-button-user-management">
									 	<div class="fold-icon icon"></div>
										Hide the list
									</div>
								</form>

								<table class="share-table">
		                            <tr>
		                                <th>Sharing users</th>
		                                <th>Shared folders/files</th>
		                                <th>List of people shared with</th>
		                                <th>
		                                    <div class="default-button-no-border">
		                                    <div class="add-more-img icon"></div>
		                                    Add More
		                                    </div>
		                                </th>
		                            </tr>
		                            <tr>
		                                <td>Jay Pierce</td>
		                                <td>
		                                	<div class="file-icon icon"></div>
		                                	<span>File name</span>
		                                </td>
		                                <td>
		                                    <div class="default-white-button-user-management">
		                                        <div class="fold-icon icon"></div>
		                                    	Hide the list
		                                    </div>
		                                </td>
		                                <td>
							 				<div class="delete-img icon"></div>
							 				<div class="quick-edit-icon icon"></div>
		                                </td>

		                            </tr>
		                            <tr class=" ">
		                                <td> </td>
		                                <td> </td>
		                                <td colspan="3">
		                                    <div class="dialog share-people-list">
		                                        <div class="share-people-list-heading">
		                                        	<div class="default-green-button-user-management">
		                                        		<div class="add-white-icon icon"></div>
		                                        		Add People
		                                        	</div>
		                                        </div>
		                                        <div class="list scroll-auto">
		                                        	<div class="share-people-list-item">Pauline Ward
		                                        		<div class="delete-img icon"></div>
		                                        	</div>
		                                        	 <div class="share-people-list-item">Pauline Ward
		                                        		<div class="delete-img icon"></div>
		                                        	</div>	                                            	
		                                        </div>
		                                    </div>
		                                </td>
		                            </tr>
								</table>	
		            		</div> 
						</div>

		            	<div class="option-containers">
		            		<div class="heading">Shares can be received from:</div>
		        				<div class="default-white-button-user-management">
									<div class="close-icon icon"></div>
									Close
		        				</div>
		        			<div class="option-group">
								<form>
									<div class="checked"><input type="radio"> <span>Shares can be received from internal and external users</span></div>
									<div><input type="radio"> <span>Shares can be received from internal users only</span></div>
									<div><input type="radio"> <span>Shares required administrator approval to receive from an external user access</span></div>
								</form>		
		            		</div> 
						</div>

		            	<div class="option-containers">
		            		<div class="heading">Creation of file and folder links:</div>
		        				<div class="default-white-button-user-management">
									<div class="close-icon icon"></div>
									Close
		        				</div>	
		        			<div class="option-group">
								<form>
									<div class="checked"><input type="radio"> <span>File and folder links can be created</span></div>
									<div><input type="radio"> <span>Shares can be received from internal users only</span></div>
									<div><input type="radio"> <span>Shares required administrator approval to receive from an external user access</span></div>
								</form>	                		
		            		</div> 
						</div>

		            	<div class="option-containers">
		            		<div class="heading">The approval to create MEGAdrop folders:</div>
		    				<div class="default-white-button-user-management">
								<div class="close-icon icon"></div>
								Close
		    				</div>		                		
		        			<div class="option-group">
								<form>
									<div class="checked"><input type="radio"> <span>MEGAdrop folders can be created</span></div>
									<div><input type="radio"> <span>SMEGAdrop folders can’t be created</span></div>
									<div><input type="radio"> <span>MEGAdrop folders require administrator approval to be created</span></div>
								</form>	                		
		            		</div> 
						</div>
		        	</div>

		        	<div class="setting-block admin">
		        		<div class="title">
		        			<div class="admin-icon48 icon48"></div>
		        			Admin              			
		              	</div>

		            	<div class="option-containers full-admin">
		            		<div class="heading">Full – administrators:</div>
		    				<div class="default-white-button-user-management">
								<div class="close-icon icon"></div>
								Close
		    				</div>		                		
		        			<div class="option-group">									
								<div class="sub-heading">Control the delegation of master level administrators.</div>	

								<div class="dialog share-people-list">
		                            <div class="share-people-list-heading">
		                            	<div class="default-green-button-user-management">
		                            		<div class="add-white-icon icon"></div>
		                            		Add Full – administrators
		                            	</div>
		                            </div>
		                            <div class="list scroll-auto">
		                            	<div class="share-people-list-item">
		                            		<span>Pauline Ward</span>
		                            		<div class="disabled-icon icon"></div>
		                            		<div class="view-icon icon"></div>
		                            	</div>
		                            	 <div class="share-people-list-item">
		                            	 	<span>Pauline Ward</span>
		                            		<div class="disabled-icon icon"></div>
		                            		<div class="view-icon icon"></div>
		                            	</div>                                	
		                            </div>

		                        </div>
		            		</div> 
						</div>

		            	<div class="option-containers sub-admin">
		            		<div class="heading">Sub – administrators:</div>
		    				<div class="default-white-button-user-management">
								<div class="close-icon icon"></div>
								Close
		    				</div>		                		
		        			<div class="option-group">									
								<div class="sub-heading">Control the approval functionality for the sub-administrators.</div>	

								<div class="default-green-button-user-management">
									<div class="add-white-icon icon"></div>
									Add Sub – administrators
								</div>

								<table class="sub-admin-table scroll-auto">
									<tr>
									    <th>Sub – administrators</th>
									    <th>Sub - users</th>
									    <th>Contact</th>
									    <th>Share</th>
									    <th>Other</th>
									    <th> </th>
									</tr>

									<tr>
									    <td>Jay Pierce</td>
									    <td>
									        <div class="default-white-button-user-management">
									            <div class="fold-icon icon"></div>
									            Hide the list
									        </div>
									    </td>
									    <td><div class="checkdiv checkboxOff-user-management small-user-management">
									    </div></td>
									    <td><div class="checkdiv checkboxOff-user-management small-user-management">
									    </div></td>
									    <td><div class="checkdiv checkboxOff-user-management small-user-management">
									    </div></td>
									    <td>
									        <div class="delete-img icon"></div>
									        <div class="quick-edit-icon icon"></div>
									    </td>                                      
									</tr>

									<tr class=" ">
									    <td> </td>
									    <td colspan="6">
									        <div class="dialog share-people-list">
									            <div class="share-people-list-heading">
									                <div class="default-green-button-user-management">
									                    <div class="add-white-icon icon"></div>
									                    Add People
									                </div>
													<div class="default-button-no-border">
														<div class="checkdiv checkboxOff-user-management small-user-management right-alignment"></div>
														<span>Add all users</span>	
									    			</div>
									            </div>
									            <div class="list scroll-auto">
										            <div class="share-people-list-item">Pauline Ward
										                <div class="delete-img icon"></div>
										            </div>
										             <div class="share-people-list-item">Pauline Ward
										                <div class="delete-img icon"></div>
										            </div>								            	
									            </div>
									        </div>
									    </td>
									</tr>

									<tr>
									    <td>Jay Pierce</td>
									    <td>
									        <div class="default-white-button-user-management">
									            <div class="unfold-icon icon"></div>
									            Show/Edit users
									        </div>
									    </td>
									    <td><div class="checkdiv checkboxOff-user-management small-user-management">
									    </div></td>
									    <td><div class="checkdiv checkboxOff-user-management small-user-management">
									    </div></td>
									    <td><div class="checkdiv checkboxOff-user-management small-user-management">
									    </div></td>
									    <td>
									        <div class="delete-img icon"></div>
									        <div class="quick-edit-icon icon"></div>
									    </td>                                      
									</tr>

									<tr class=" ">
									    <td> </td>
									    <td colspan="6">
									        <div class="dialog share-people-list">
									            <div class="share-people-list-heading">
									                <div class="default-green-button-user-management">
									                    <div class="add-white-icon icon"></div>
									                    Add People
									                </div>
													<div class="default-button-no-border">
														<div class="checkdiv checkboxOff-user-management small-user-management right-alignment"></div>
														<span>Add all users</span>	
									    			</div>
									            </div>
									            <div class="list scroll-auto">
										            <div class="share-people-list-item">Pauline Ward
										                <div class="delete-img icon"></div>
										            </div>
										             <div class="share-people-list-item">Pauline Ward
										                <div class="delete-img icon"></div>
										            </div>								            	
									            </div>
									        </div>
									    </td>
									</tr>
								</table>
		            		</div> 
						</div>
		        	</div>

		        	<div class="setting-block">
		        		<div class="title">
		        			<div class="other-icon48 icon48"></div>
		        			Other              			
		              	</div>
		 
		            	<div class="option-containers recycle-bin">
		            		<div class="heading">Recycle bin:</div>
		    				<div class="default-white-button-user-management">
								<div class="close-icon icon"></div>
								Close
		    				</div>		                		
		        			<div class="option-group">
								<form>
									<div class="checked"><input type="radio"> <span>Users are allowed to empty their recycle bins</span></div>
									<div><input type="radio"> <span>Users cannot empty their recycle bins</span></div>
									<div><input type="radio"> 
										<div class="option-with-varible">Users cannot empty their recycle bins, files are permanently deleted after
											<div class="recycle-days">30</div>
										days</div>
									</div>
								</form>	                		
		            		</div> 
						</div>
		        	</div>
		        </div>

		        <div class="profile">
		        	<div class="setting-block">
		        		<div class="title">
		        			<div class="company-icon48 icon48"></div>
		        			Company information              			
		        		</div>

		            	<div class="option-containers">
		            		<div class="bus-input-block">
							    <div class="bus-input error">
									<div class="bus-reg-icon company-name"></div>
									<input type=" " name=" " placeholder="Company Name">
									<div class="error-message">is the error signal too red?</div>
								</div>
								<div class="bus-input">
									<div class="bus-reg-icon email"></div>
									<input type=" " name=" " placeholder="Email">
									<div class="error-message">is the error signal too red?</div>
								</div>
								<div class="bus-input note">
									<div class="setting-icon24 vat"></div>
									<input type=" " name=" " placeholder="VAT">
									<div class="error-message">is the error signal too red?</div>
									<div class="note-message">*Please insert the TAX code for your country.</div>
								</div>
		            		</div>

		            		<div class="bus-input-block">
							    <div class="bus-input">
									<div class="setting-icon24 add"></div>
									<input type=" " name=" " placeholder="Address line 1">
									<div class="error-message">is the error signal too red?</div>
								</div>
							    <div class="bus-input short-input">
									<input type=" " name=" " placeholder="Address line 2">
									<div class="error-message">is the error signal too red?</div>
								</div>
							    <div class="bus-input short-input">
									<input type=" " name=" " placeholder="City">
									<div class="error-message">is the error signal too red?</div>
								</div>
							    <div class="bus-input short-input">
									<input type=" " name=" " placeholder="State" class="state">
									<input type=" " name=" " placeholder="Zip Code" class="zip">
									<div class="error-message">is the error signal too red?</div>
								</div>
							    <div class="bus-input short-input">
									<input type=" " name=" " placeholder="Country">
									<div class="error-message">is the error signal too red?</div>
								</div>
		            		</div>
		            		<div class="default-green-button-user-management">
		            			Save changes
		            		</div>
		            		<div class="clear"></div>
						</div>
		        	</div>
		        	<div class="setting-block">
		        		<div class="title">
		        			<div class="admin-icon48 icon48"></div>
		        			Adminstrators             			
		        		</div>

		            	<div class="option-containers">
		            		<div class="bus-input-block">
								<div class="bus-input">
									<div class="bus-reg-icon number-of-user"></div>
									<input type=" " name=" " placeholder="First Name" class="fir-name">
									<input type=" " name=" " placeholder="Last Name" class="las-name">
					   				<div class="error-message">is the error signal too red?</div>
								</div>
								<div class="bus-input">
									<div class="bus-reg-icon email"></div>
									<input type=" " name=" " placeholder="Email">
									<div class="error-message">is the error signal too red?</div>
								</div>
		            		</div>
		            		<div class="bus-input-block">
								<div class="bus-input">
									<div class="bus-reg-icon pw"></div>
									<input type=" " name=" " placeholder="Password">
									<div class="error-message">is the error signal too red?</div>
								</div>
								<div class="bus-input">
									<div class="bus-reg-icon pw"></div>
									<input type=" " name=" " placeholder="Retype password">
									<div class="error-message">is the error signal too red?</div>
								</div>
		            		</div>


		            		<div class="default-green-button-user-management">
		            			Save changes
		            		</div>
		            		<div class="clear"></div>
						</div>
		        	</div>			        	
		        </div>

		        <div class="invoice hidden">
		        	<div class="invoice-list hidden">
			        	<div class="invoice-subtitle">Invoice list</div>
			        	<div class="invoice-table-container">
							<table class="invoice-table-header">
			                    <tr>
			                        <th>
			                        	<div class="arrow asc">Date</div>
			                        </th>
			                        <th>
			                        	<div class="arrow desc">Description</div>
			                       </th>
			                        <th>
			                        	<div class="arrow desc">Amount</div>
			                        </th>
			                        <th></th>
			                    </tr>
			                 </table>
			                 <div class="invoice-table-list-container">
			                 <table class="invoice-table">
			                    <tr>
			                        <td class="">01 Aug 2018</td>
			                        <td class="">Place description</td>
			                        <td class="">$512.30</td>
			                        <td class="">
			                        	<div class="default-white-button-user-management">View detals</div>
			                        </td>
			                    </tr>
			                    <tr>
			                        <td class="">01 Aug 2018</td>
			                        <td class="">Place description</td>
			                        <td class="">$512.30</td>
			                        <td class="">
			                        	<div class="default-white-button-user-management">View detals</div>
			                        </td>
			                    </tr>                    
							</table>		                 	
			                 </div>	
			        	</div>

		        	</div>
		        	<div class="invoice-detail">
						<div class="default-white-button-user-management">
							<div class="export-pdf-icon icon"></div>
							Export to PDF
						</div>
						<div class="invoice-container">
							<div class="mega-contact-container">
								<div class="mega-logo"></div>
								<p class="inv-subtitle">Mega Limited</p>
								<ul>
								<li class="inv-mega-contact">
									<div class="email-small-icon icon12"></div>
									<p>invoicing@mega.nz</p>
								</li>
								<li class="inv-mega-contact">
									<div class="add-small-icon icon12"></div>
									<p>Level 21, Huawei Centre, 120 Albert Street, Auckland  1010,  New Zealand</p>
								</li>
								<li class="inv-mega-contact">
									<div class="post-small-icon icon12"></div>
									<p>Private Bag 92 533, Wellesley St, Auckland  1141,  New Zealand</p>
								</li>
								</ul>
							</div>
							<div class="inv-title-container">
								<div class="inv-right">
								<div class="inv-title">Invoice</div>
								<ul class=" ">
									<li>
										<span>Invoice Date: Invoice Date</span>
										<span>13 Nov 2017	</span>
									</li>
									<li>
										<span>Invoice Number:	</span>
										<span>NwC-AOyfAxo	</span>
									</li>	
									<li>
										<span>VAT: </span>
										<span>110-633-521</span>
									</li>												
								</ul>								
								</div>
							</div>
							<div class="inv-border"></div>
							<div class="inv-add-container">
								<p class="inv-subtitle">Billed to:</p>
								<ul>
									<li class="inv-company-name">AAA LTD.</li>
									<li class="inv-per-name">ATTN: Greg Daniel</li>
									<li class=" ">money@mega.co.nz</li>
									<li class=" ">120 Albert St, Auckland 1010, 120 Albert St, Auckland  1010 </li>
									<li class=" ">New Zealand</li>
									<li class=" ">VAT: 9429030423626 </li>
								</ul>							
							</div>
							<div class="inv-payment-table">
								<ul>
									<li>
										<div class="inv-payment-header">Date</div>
										<div class="inv-payment-header">Description</div>
										<div class="inv-payment-header">Price</div>
									</li>
									<li>
										<div class="inv-payment-item">1/8/2018</div>
										<div class="inv-payment-item">Business account for X user<br>(1/7/2018 - 31/7/2018)</div>
										<div class="inv-payment-item">€4.34</div>
									</li>
									<li>
										<div class="inv-payment-item">1/8/2018</div>
										<div class="inv-payment-item">Business account for X user<br>(1/7/2018 - 31/7/2018)</div>
										<div class="inv-payment-item">€4.34</div>
									</li>
									<li class="inv-payment-price">
										<div class="inv-payment-price-detail">GST (15%):</div>
										<div class="inv-payment-price-detail">€4.34</div>
									
									</li>
									<li class="inv-payment-price">
										<div class="inv-payment-price-detail">TOTAL:</div>
										<div class="inv-payment-price-detail">€40000000.34</div>
									</li>
								</ul>
							</div>
						</div>

						<div class="invoice-container">
							<div class="mega-contact-container">
								<div class="mega-logo"></div>
								<p class="inv-subtitle">Mega Limited</p>
								<ul>
								<li class="inv-mega-contact">
									<div class="email-small-icon icon12"></div>
									<p>invoicing@mega.nz</p>
								</li>
								<li class="inv-mega-contact">
									<div class="add-small-icon icon12"></div>
									<p>Level 21, Huawei Centre, 120 Albert Street, Auckland  1010,  New Zealand</p>
								</li>
								<li class="inv-mega-contact">
									<div class="post-small-icon icon12"></div>
									<p>Private Bag 92 533, Wellesley St, Auckland  1141,  New Zealand</p>
								</li>
								</ul>
							</div>
							<div class="inv-title-container">
								<div class="inv-right">
								<div class="inv-title">Receipt</div>
								<ul class=" ">
									<li>
										<span>Invoice Date: Invoice Date</span>
										<span>13 Nov 2017	</span>
									</li>
									<li>
										<span>Invoice Number:	</span>
										<span>NwC-AOyfAxo	</span>
									</li>	
									<li>
										<span>VAT: </span>
										<span>110-633-521</span>
									</li>												
								</ul>								
								</div>
							</div>
							<div class="inv-border"></div>
							<div class="inv-add-container">
								<p class="inv-subtitle">Billed to:</p>
								<ul>
									<li class="inv-company-name">AAA LTD.</li>
									<li class="inv-per-name">ATTN: Greg Daniel</li>
									<li class=" ">money@mega.co.nz</li>
									<li class=" ">120 Albert St, Auckland 1010, 120 Albert St, Auckland  1010 </li>
									<li class=" ">New Zealand</li>
									<li class=" ">VAT: 9429030423626 </li>
								</ul>							
							</div>
							<div class="inv-payment-table">
								<ul>
									<li>
										<div class="inv-payment-header">Date</div>
										<div class="inv-payment-header">Description</div>
										<div class="inv-payment-header">Price</div>
									</li>
									<li>
										<div class="inv-payment-item">1/8/2018</div>
										<div class="inv-payment-item">Business account for X user</div>
										<div class="inv-payment-item">€4.34</div>
									</li>
									<li>
										<div class="inv-payment-item">1/8/2018</div>
										<div class="inv-payment-item">Business account for X user</div>
										<div class="inv-payment-item">€4.34</div>
									</li>
									<li class="inv-payment-price">
										<div class="inv-payment-price-detail">GST (15%):</div>
										<div class="inv-payment-price-detail">€4.34</div>
									
									</li>
									<li class="inv-payment-price">
										<div class="inv-payment-price-detail">TOTAL:</div>
										<div class="inv-payment-price-detail">€40000000.34</div>
									</li>
								</ul>
							</div>
						</div>
		        	</div>
		        </div>
			</div>
	    </div>
	</div>

</div><!-- END fm-main-user-management-->


</div><!-- END fmholder-->

</body>
</html>







